<template>
  <div id="dataanalyst">
    <div class="ctner">
      <div class="shujuheader"></div>
      <div class="zongliang">
        <ul>
          <li>
            <div class="hengxian">
              <img src="../image/Vector 1 (2).png" alt="" />
            </div>
            <ul class="neirong">
              <li>
                <div class="zxse_data">
                  <span
                    >总销售额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  ><img
                    class="gantanhao"
                    src="../image/InfoCircle.png"
                    alt=""
                  />
                </div>
              </li>
              <li><img src="../image/jine.png" alt="" /></li>
              <li>相较昨日&nbsp;12%</li>
              <li>昨日销量&nbsp;12,423</li>
            </ul>
          </li>
          <li>
            <div class="hengxian">
              <img src="../image/Vector 1 (2).png" alt="" />
            </div>
            <ul class="neirong">
              <li>
                <div class="zxse_data">
                  <span
                    >总浏览量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  ><img
                    class="gantanhao"
                    src="../image/InfoCircle.png"
                    alt=""
                  />
                </div>
              </li>
              <li><img src="../image/jine.png" alt="" /></li>
              <li><img src="../image/base.png" alt="" /></li>
              <li>昨日浏览量&nbsp;12,34</li>
            </ul>
          </li>
          <li>
            <div class="hengxian">
              <img src="../image/Vector 1 (2).png" alt="" />
            </div>
            <ul class="neirong">
              <li>
                <div class="zxse_data">
                  <span
                    >总收藏量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  ><img
                    class="gantanhao"
                    src="../image/InfoCircle.png"
                    alt=""
                  />
                </div>
              </li>
              <li><img src="../image/jine.png" alt="" /></li>
              <li><img src="../image/zhuxing.png" alt="" /></li>
              <li>昨日收藏量&nbsp;256</li>
            </ul>
          </li>
          <li>
            <div class="hengxian">
              <img src="../image/Vector 1 (2).png" alt="" />
            </div>
            <ul class="neirong">
              <li>
                <div class="zxse_data">
                  <span
                    >总转化率&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  ><img
                    class="gantanhao"
                    src="../image/InfoCircle.png"
                    alt=""
                  />
                </div>
              </li>
              <li><img src="../image/jine.png" alt="" /></li>
              <li><img src="../image/jindutiao.png" alt="" /></li>
              <li>昨日转化率&nbsp;23%</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="data_footer">
        <div class="datapane">
          <div class="tabs_data">
            <el-tabs v-model="activeName">
              <el-tab-pane label="全部分类" name="first"></el-tab-pane>
              <el-tab-pane label="雪票" name="second"></el-tab-pane>
              <el-tab-pane label="教练" name="third"></el-tab-pane>
              <el-tab-pane label="酒店" name="fourth"></el-tab-pane>
              <el-tab-pane label="卡类" name="fifth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="datatime">
            <ul>
              <li>本日</li>
              <li>本周</li>
              <li>本月</li>
              <li>本年</li>

              <li>
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00']"
                >
                </el-date-picker>
              </li>
            </ul>
          </div>
        </div>

        <div class="zongti">
          <div class="data_echarts">
            <echartszzt></echartszzt>
          </div>
          <div class="sxpm">
            <span>销售排名</span>
            <ul>
              <li>
                <span class="yuandian">1</span
                >&nbsp;&nbsp;&nbsp;丰科万达世界嘉年华&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;213156
              </li>
              <li>
                <span class="yuandian">2</span
                >&nbsp;&nbsp;&nbsp;颐和伏牛山居酒店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13254
              </li>
              <li>
                <span class="yuandian">3</span
                >&nbsp;&nbsp;&nbsp;伏牛山滑雪教练2小时&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11961
              </li>
              <li>
                4&nbsp;&nbsp;&nbsp;颐和伏牛山居教练1小时&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9841
              </li>
              <li>
                5&nbsp;&nbsp;&nbsp;2020沈阳奥体冰雪卡&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5648
              </li>
              <li>
                6&nbsp;&nbsp;&nbsp;颐和伏牛山居温泉门票...&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3763
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echartszzt from "../components/Echartszzt.vue";
export default {
  components: { echartszzt },
  data() {
    return {
      activeName: "first",
      value1: "",
      value2: "",
    };
  },
};
</script>
<style scoped>
.hengxian {
  position: absolute;
  top: 120px;
  left: 20px;
}
.neirong > li {
  list-style: none;
  margin: 18px 20px;
}
.zxse_data {
  /* margin-top: 20px; */
  /* margin-left: 20px; */
}

.gantanhao {
  vertical-align: middle;
}

div /deep/ .el-tabs__item.is-active {
  color: #409eff;
}

.yuandian {
  border-radius: 50%;
  background-color: #262626;
  color: #fff;
}

.sxpm > ul {
  /* display: flex; */
  /* justify-content: space-around; */
}

.sxpm > ul > li {
  list-style: none;
  font-size: 15px;
  padding: 15px 0;
}

.zongti {
  width: 1200px;
  height: 345px;
  /* background-color: pink; */
  position: relative;
}

.sxpm {
  width: 259px;
  height: 320px;
  /* margin-left:800px; */
  /* background-color: pink; */
  /* display: inline-block; */
  position: absolute;

  right: 24px;
  bottom: 24px;
}

div /deep/ .el-tabs__nav-wrap {
  overflow: hidden;
  margin-bottom: -1px;
  position: relative;
  margin-left: 10px;
}

.data_echarts {
  width: 757px;
  height: 296px;
  /* background-color: pink; */
  margin-top: 24px;
  margin-left: 24px;
}

div /deep/ .el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner {
  height: 32px;
  width: 256px;
}

.datatime > ul {
  display: flex;
  justify-content: space-between;
}

.datatime > ul > li {
  list-style: none;
  line-height: 22px;
  /* float: left; */
  /* vertical-align: middle; */
}

.datatime {
  width: 488px;
  height: 22px;
  /* background-color: red; */
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 10px;
}

div /deep/ .el-tabs__item:hover {
  color: #409eff;
  cursor: pointer;
}

div /deep/ .el-tabs__item.is-active {
  color: #409eff;
}

div /deep/ div[data-v-2c423564] .el-tabs__item {
  padding: 0 10px;
  height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 19px;
  font-weight: 600;

  position: relative;
}

.tabs_data {
  width: 320px;
  height: 56px;
  /* background-color: skyblue; */
  display: inline-block;
}

.datapane {
  width: 1200px;
  height: 56px;
  /* background-color: pink; */
}

.zongliang > ul > li {
  width: 288px;
  height: 192px;
  background-color: #fff;
  list-style: none;
}

.zongliang > ul {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.data_footer {
  width: 1200px;
  height: 424px;
  background-color: #fff;
  margin-top: 25px;
  position: relative;
}

.zongliang {
  width: 1200px;
  height: 182px;
  /* background-color: #fff; */
  margin-top: 25px;
}

.ctner {
  width: 1200px;
  height: 777px;
  /* background-color: #fff; */
  margin-top: 45px;
  margin-left: 15px;
}

.shujuheader {
  width: 1200px;
  height: 123px;
  background-color: #fff;
}
</style>